<template>
  <div class="v-container">
    <v-header title="洗车服务">
      <span class="back" @click="goBack">
        <i class="el-icon-arrow-left"></i>返回
      </span>
    </v-header>
    <div class="v-main">

      <div class="qiangBox">
        <div class="qiangContent">
          <img src="@/assets/images/xcfw_banner.jpg" width="100%">
          <div class="remainNum">
            剩余名额：<span id="remainNum" class="g-color-red">{{oneRemnant}}</span>
            <!-- <p>*由于在线抢购客户较多，剩余名额仅供参考，请尽快参与</p> -->
          </div>
          <div class="rules-title">
            <img src="@/assets/images/bt_hdxz.png" alt="活动细则">
          </div>
          <ul>
            <li>1、活动时间为即日起至2019年6月30日。</li>
            <li>2、每人每月限购2张，数量有限，先购先得。</li>
            <li>3、洗车券服务有效期自购买日起30天，成功购买的洗车券可在活动页面中“我的订单”中查看，活动门店验证后方可享受服务，无需预约。</li>
            <li>4、活动参与车辆限七座（含）以下车辆使用，7座以上车辆需额外加收费用，具体费用标准以各网点实际情况为准，本次活动优惠不与商户店内其它优惠、促销、赠券同时享受。</li>
            <li>5、本活动适用于上海盛世大联汽车服务有限公司莆田地区所有洗车服务合作门店，可在活动页面直接查询服务门店，如有门店搬迁、关闭等变更情况，银行不再另行通知持卡人，详情可咨询盛大汽车服务热线：<a href="tel:4008801768">400-880-1768转3</a>。</li>
          </ul>
        </div>
      </div>

      <div class="bottom-submit">
        <mt-button v-bind:class="{ 'active': isActive }" class="my-button round" @click="validateRule">立即抢购</mt-button>
      </div>
    </div>
  </div>

</template>


<script>
import vHeader from '@/components/Header.vue';
import { Resource } from '@/services/resource';
// import Cookies from 'js-cookie';
// import { MessageBox } from 'mint-ui';

export default {
  name: 'qiang',
  components: {
    vHeader
  },
  data() {
    return {
      oneRemnant: '', // 剩余名额
      btnColor: '#f37938',
      isActive: false
    };
  },
  mounted() {
    this.GetQuotaNum();
  },
  methods: {
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 获取剩余名额
    GetQuotaNum() {
      Resource.getRemainNum.post({}, {}).then(res => {
        this.oneRemnant = res.oneRemnant;
        this.isActive = this.oneRemnant > 0;
      });
    },
    // 获取参与资格
    validateRule() {
      if (!this.isActive) return;
      Resource.getValidateRule.post({}, {}).then(res => {
        console.log(res);
        this.pageTo('pay');
      });
    },
    // 跳转页面
    pageTo(name) {
      console.log(name);
      this.$router.push(name);
    }
  }
};
</script>

<style lang="less" scoped>
@import url('./activity.less');
</style>
